<template>
  <div class="app-container">
    <el-tabs type="card" @tab-click="handleClick">
      <el-tab-pane v-model="showSend" label="短信下发">
        <slot>
          <el-form v-model="form">
            <el-row :gutter="18">
              <el-col :span="6">
                <el-form-item label="短信模板:">
                  <el-select @change="selSmsOptions" v-model="form.smsTemplate" placeholder="请选择短信模板"  clearable>
                    <el-option
                      v-for="dict in SmsOptions"
                      :key="dict.dictValue"
                      :label="dict.dictValue"
                      :value="dict.dictLabel"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="下发参数:">
                  <el-input type="text" v-model="form.label">
                  </el-input>
                </el-form-item>
                <el-form-item label="卡号:">
                  <span style="color: #C03639">注意：批量操作时请换行填入卡号！</span>
                  <el-input :autosize="{ minRows: 5, maxRows: 10}" type="textarea" v-model="form.iccids">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-button type="primary" @click="isok">下发通知</el-button>
          </el-form>
        </slot>
      </el-tab-pane>
      <el-tab-pane v-model="showReceive" label="上行记录">
        <slot>
          <el-form v-model="queryParams">
            <el-row :gutter="16">
              <el-col :span="5">
                <el-form-item label="卡号">
                  <el-input v-model="queryParams.msisdn"/>
                </el-form-item>
              </el-col>
              <div style="margin-top: 36px;">
                <el-button @click="search" type="primary">搜索</el-button>
                <el-button @click="refs" type="info">刷新</el-button>
              </div>
            </el-row>
          </el-form>
          <el-table :loading="loading" :data="receiveData">
            <el-table-column prop="sno" label="流水号"/>
            <el-table-column prop="msisdn" label="卡号"/>
            <el-table-column prop="content" label="短信内容"/>
            <el-table-column prop="msgFmt" label="信息格式">
              <slot slot-scope="scope">
                <div v-if="scope.row.msgFmt=='0'">ASCII</div>
                <div v-else-if="scope.row.msgFmt=='8'">UCS2 编码</div>
                <div v-else="scope.row.msgFmt=='15'">含 GB 汉字</div>
              </slot>
            </el-table-column>
            <el-table-column prop="receive_time" label="接收时间">
              <slot slot-scope="scope">
                {{ formatToSimpleDateTime(scope.row.receive_time) }}
              </slot>
            </el-table-column>
          </el-table>

        </slot>
        <pagination
          style="margin-bottom: 32px"
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :page-sizes="pageSizes"
          :limit.sync="queryParams.pageSize"
          @pagination="getReceiveSms"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { queryReceiveSms, sendToDevice } from '/src/api/newcard/sendsms/sendsms'

export default {
  name: 'index',
  data() {
    return {
      loading: false,
      form: {},
      SmsOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      pageSizes: [10, 30, 50, 100, 200, 300, 500],//分页
      receiveData: [],
      showSend: true,
      showReceive: true
    }
  },
  mounted() {
  },
  created() {
    this.getDicts('sms_template').then(response => {
      this.SmsOptions = response.data
    })
  },
  methods: {
    selSmsOptions(va) {
      this.form.smsTemplate = va
    },
    search() {
      this.getReceiveSms()
    },
    refs() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      },
        this.getReceiveSms()
    },
    formatToSimpleDateTime(dateStr) {
      // 解析 ISO 8601 带时区的时间字符串
      const date = new Date(dateStr)
      if (isNaN(date)) {
        return 'Invalid Date'
      }
      // 获取 UTC 时间毫秒数，然后加上东八区偏移（8小时）对应的毫秒数
      const utcTime = date.getTime()
      const beijingTime = new Date(utcTime + 8 * 60 * 60 * 1000)

      const year = beijingTime.getUTCFullYear()
      const month = String(beijingTime.getUTCMonth() + 1).padStart(2, '0') // 月份从0开始
      const day = String(beijingTime.getUTCDate()).padStart(2, '0')
      const hour = String(beijingTime.getUTCHours()).padStart(2, '0')
      const minute = String(beijingTime.getUTCMinutes()).padStart(2, '0')
      const second = String(beijingTime.getUTCSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hour}:${minute}:${second}`
    },
    handleClick(tab) {
      if (tab.index == '0') {
        this.showReceive = false
      }
      if (tab.index == '1') {
        this.getReceiveSms()
        this.showSend = false
      }
    },
    getReceiveSms() {
      this.loading = true
      queryReceiveSms(this.queryParams).then(res => {
        if (res.code == '200') {
          this.receiveData = res.data.Data
          this.total = res.data.Pu.rowCount
        }
      })
    },
    isok() {
      sendToDevice(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success(res.msg)
          this.form = {}
        } else {
          this.$message.info(res.msg)
          this.form = {}
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
